import router from "@/router";
<template>
  <div class="detail-container">
    <detail-box >
      <div class="detail-info">
        <div class="detail-li">
          <div><label>厂商ID：</label><el-input v-model="itemObj.ServiceID" class="dinput"/></div>
          <div><label>代理节点地址：</label><el-input v-model="itemObj.AgentUrl" class="dinput" /></div>
        </div>
        <div class="detail-li">
          <div><label>厂商密码：</label><el-input class="dinput"  maxlength="50" autocomplete="on" v-model="itemObj.Passwd" placeholder="密码"  show-password/></div>
          
          <div><label>厂商回调地址：</label><el-input v-model="itemObj.FirmUrl" class="dinput" /></div>
        </div>
        <div class="detail-li">
          <div><label>浏览器播放标题：</label><el-input v-model="itemObj.WebTitle" class="dinput" /></div>
          <div><label>浏览器播放地址：</label><el-input v-model="itemObj.WebServAddr" class="dinput" /></div>
        </div>
      </div>
    </detail-box>
    <detail-box title="直播配置">
      <div class="detail-info">
        <div class="detail-li">
          <div><label>推流节点数：</label><el-input v-model="itemObj.PushNum" class="dinput"/></div>
          <div><label>FLV节点比例：</label><el-input v-model="itemObj.FlvNode" class="dinput"/>%</div>
          <div><label>最大直播数：</label><el-input v-model="itemObj.MaxVodSource" class="dinput" /></div>
        </div>
        <div class="detail-li">
          <div><label>拉流节点数：</label><el-input v-model="itemObj.PullSourceNum" class="dinput"/></div>
          <div><label>HLS节点比例：</label><el-input v-model="itemObj.HlsNode" class="dinput" />%</div>
        </div>
       <div class="detail-li">
          <div><label>源节点数：</label><el-input v-model="itemObj.SourceNum" class="dinput"/></div>
          <div><label>MP4节点比例：</label><el-input v-model="itemObj.Mp4Node" class="dinput" />%</div>
        </div>
      </div>
    </detail-box>
    <detail-box title="截图与录像">
      <div class="detail-info">
        <div class="detail-li">
          <div>
            <label>状态：</label>
            <el-radio-group v-model="itemObj.IsRecord" class="ml-4">
              <el-radio label="1" size="large">启用</el-radio>
              <el-radio label="0" size="large">禁用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="detail-li">
          <div><label>录像路径：</label><el-input v-model="itemObj.RecordDir" class="dinput" /></div>
          <div><label>截图路径：</label><el-input v-model="itemObj.SnapDir" class="dinput" /></div>
        </div>
        <div class="detail-li">
          <div><label>录像间隔：</label><el-input v-model="itemObj.RecordSegSeconds" class="dinput" /></div>
          <div><label>截图间隔：</label><el-input v-model="itemObj.SnapGap" class="dinput" /></div>
        </div>
        <div class="detail-li">
          <div><label>录像分段数：</label><el-input v-model="itemObj.RecordSegCount" class="dinput"/></div>
          <div><label>截图总张数：</label><el-input v-model="itemObj.SnapCount" class="dinput" /></div>
        </div>
      </div>
    </detail-box>
    <detail-box title="点播配置">
      <div class="detail-info">
        <div class="detail-li">
          <div><label>存储份数：</label><el-input v-model="itemObj.StoreFileNum" class="dinput" /></div>
          <div><label>最大点播数：</label><el-input v-model="itemObj.MaxClientCount" class="dinput" /></div>
        </div>
        <div class="detail-li">
          <div><label>有效时长：</label><el-input v-model="itemObj.VodExpired" class="dinput" />小时</div>
        </div>
      </div>
    </detail-box>
    <detail-box title="代理配置">
      <div class="detail-info">
        <div class="detail-li" v-for="(item, index) in itemObj.Agents" :key="index">
          <p  ><label>节点ID：</label><el-input v-model="item.AgentId" class="dinput" /> <el-button @click="delAgents(index)">-</el-button></p>
        </div>
        <div class="detail-li" v-for="(item, index) in addAgentsObj" :key="index">
          <p><label>节点ID：</label><el-input v-model="item.AgentId" class="dinput" /> <el-button @click="addnewAgents">+</el-button><el-button @click="delnewAgents" v-if="index!==0">-</el-button></p>
        </div>
      </div>
    </detail-box>
    <div class="glup-btn">
      <el-button type="primary" v-if="isAdd" @click="changeClick" :loading="loading">新增</el-button>
      <el-button type="primary" :loading="loading"  v-else @click="changeClick">修改</el-button>
      <el-button @click="goBack">取消</el-button>
    </div>
  </div>
</template>
<script lang="ts" >
import { defineComponent, getCurrentInstance, ref } from "vue";
import eleTable from '@/components/ele-table/index.vue';
import DetailBox from "@/components/detail-box/index.vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

export default defineComponent({
  components:{
    eleTable,
    DetailBox
},
  setup() {
    const instance: any = getCurrentInstance();
    const GL = instance.appContext.config.globalProperties;
    const loading = ref(false);
    const route = useRoute();
    const router = useRouter();
    const isAdd = ref(true);
    const itemObj: any = ref({Passwd: '123456',IsRecord: '0', PushNum: '2', FlvNode: '60', MaxVodSource: '1500',PullSourceNum: '20', HlsNode: '40', SourceNum: '20', Mp4Node: '0',RecordDir:'/zol/vod', SnapDir:'/zol/vod/picture',RecordSegSeconds:'1',SnapGap:'1', RecordSegCount: '30', SnapCount: '30', StoreFileNum: '20', MaxClientCount: '1500', VodExpired: '6'  })
    let factuer: any = GL.$store.state.factuer || {}
    const addAgentsObj = ref([{AgentId: ''}])
    const initData = () => {
      const id = route.query.ServiceID
      isAdd.value = id ? false : true;
      if(id) {
        let data: any = {} ;
        factuer.Services.map(item => {
          if(item.ServiceID === id) {return data = item}
        })
        data.IsRecord = data.IsRecord ? data.IsRecord + '' : '0'
        data.FlvNode = data.FlvNode ? data.FlvNode.toFixed(2) * 100 : 0
        data.HlsNode = data.HlsNode ? data.HlsNode.toFixed(2) * 100 : 0
        data.Mp4Node = data.Mp4Node ? data.Mp4Node.toFixed(2) * 100 : 0
        data.VodExpired = data.VodExpired ? (data.VodExpired / 60 / 60 ) : 0
        itemObj.value = data
      }
    }
    const goBack = () => {
      router.go(-1)
    }
    const changeClick = () => {
      loading.value = true
      let addData: any = []
      let {Services} = factuer
      if(isAdd) {
        itemObj.value.IsRecord = Number(itemObj.value.IsRecord) || 0
        itemObj.value.Type = 1
        itemObj.value.FlvNode = Number(itemObj.value.FlvNode) / 100 || 0
        itemObj.value.HlsNode = Number(itemObj.value.HlsNode) / 100 || 0
        itemObj.value.Mp4Node = Number(itemObj.value.Mp4Node) / 100 || 0
        itemObj.value.VodExpired = Number(itemObj.value.VodExpired) * 60 * 60 || 0
        itemObj.value.StoreFileNum = Number(itemObj.value.StoreFileNum) || 0
        itemObj.value.SourceNum = Number(itemObj.value.SourceNum) || 0
        itemObj.value.SnapGap = Number(itemObj.value.SnapGap) || 0
        itemObj.value.SnapCount = Number(itemObj.value.SnapCount) || 0
        itemObj.value.RecordSegSeconds = Number(itemObj.value.RecordSegSeconds) || 0
        itemObj.value.RecordSegCount = Number(itemObj.value.RecordSegCount) || 0
        itemObj.value.PushNum = Number(itemObj.value.PushNum) || 0
        itemObj.value.PullSourceNum = Number(itemObj.value.PullSourceNum) || 0
        itemObj.value.MaxVodSource = Number(itemObj.value.MaxVodSource) || 0
        itemObj.value.MaxClientCount = Number(itemObj.value.MaxClientCount) || 0
        itemObj.value.Mp4Node = Number(itemObj.value.Mp4Node) || 0
        itemObj.value.Agents = Array.from(addAgentsObj.value) || []
        addAgentsObj.value = []
        addData.push(itemObj.value)
      } else {
        Services.forEach(item => {
          if(item.ServiceID === itemObj.value.ServiceID) {
            item = itemObj.value
            item.IsRecord = Number(item.IsRecord) || 0
            item.Type = 1
            item.FlvNode = Number(item.FlvNode) / 100 || 0
            item.HlsNode = Number(item.HlsNode) / 100 || 0
            item.Mp4Node = Number(item.Mp4Node) / 100 || 0
            item.VodExpired = Number(item.VodExpired) * 60 * 60 || 0
            item.Agents = [...item.Agents, ...addAgentsObj.value]
          }
        })
      }
      GL.$axios.post(GL.$api.video.ModifyConfig, { Services: isAdd ?  addData : Services})
      .then((res: any) => {
        if(res.Code === 0) {
          ElMessage.success('修改成功')
          setTimeout(()=>{
            loading.value = false;
            goBack()
          },500)
        }
      })
      .catch((err: any) => {
          loading.value = false;
      });
    }
    initData()
    const addnewAgents = () => {
      addAgentsObj.value.push({AgentId: ''});
    }
    const delnewAgents = (i) => {
      addAgentsObj.value.splice(i,1);
    } 
    const delAgents = (i) => {
      itemObj.value.Agents && itemObj.value.Agents.splice(i, 1);
    }
    return {
      loading,
      itemObj,
      isAdd,
      goBack,
      changeClick,
      addnewAgents,
      delAgents,
      addAgentsObj,
      delnewAgents
    }
  }
})

</script>
<style lang="scss" scoped>
.detail-container{
  .detail-info{
    .detail-li{
      display: flex;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      div{
        width: 33%;
        display: flex;
        align-items: center;
        span{
          margin-left: 20px;
          color: #409eff;
          cursor: pointer;
          text-decoration: underline;
        }
      }
      label{
        width: 120px;
        text-align: right;
      }
      p{
        display: flex;
        align-items: center;
      }
      :deep(.el-input__suffix) {
        top: -3px;
      }
    }
  }
  .detail-echart{
    display: flex;
    .echart1, .echart2{
      width: 50%; 
    }
  }
  .glup-btn{
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
  }
  .dinput{
    width: 200px !important;
    margin-right: 10px;
  }
}
</style>